<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      height: 400px;
      margin: auto;
    }

    .boxs {
      width: 800px;
      height: 200px;
      background-color: rgb(196, 196, 196);
    }

    h1 {
      margin-left: 750px;
    }

    img {
      width: 150px;
      height: 150px;
      padding: 20px;
    }

    .a {
      position: relative;
      top: -80px;
      font-size: 20px;
      margin-right: 20px;
    }

    .s {
      position: relative;
      top: -150px;
    }

    .but {
      position: relative;
      top: -205px;
      left: 900px;
    }

    .box1 {
      width: 300px;
      height: 300px;
      position: relative;
      bottom: 510px;
      left: 1250px;
      border: 1px solid black;
      border-radius: 20px;
      display: none;
    }

    .box1 img {
      margin-left: 50px;
    }

    .a22 {
      margin-left: 120px;
    }

    .sp {
      margin-left: 110px;
      font-weight: bold;
      font-size: 25px;
    }
  </style>
</head>

<body>
  <h1>购物车</h1>
  <div class="box">
    <div class="boxs">

    </div>
  </div>
  <h1 class="s">总价:<span>0</span></h1><button class="but" onclick="suan()">结算</button>
  <div class="box1">

  </div>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script>
    var a = localStorage.getItem('data')
    var b = JSON.parse(a)
    function apply() {
      $('.boxs').html('')
      b.forEach(item => {
        $('.boxs').append(`
      <input type="checkbox" ${item.id}?:'checked':""   onclick='inp(${item.id})'>
      <img src="${item.img}">
      <span class="a">${item.name}</span>
      <span class="a">￥:${item.pic}</span>
      <button class="a" onclick='jian()'>-</button>
      <span class="a">${item.num}</span>
      <button class="a" onclick='jia()'>+</button>
        `)
      });
    }
    apply()
    //+
    function jia() {
      b.forEach(item => {
        item.num++
        apply()
      })
    }
    //-
    function jian() {
      b.forEach(item => {
        if (item.num != 1) {
          item.num--
          apply()
        }
      })
    }
    //价格
    var box1 = document.querySelector('.boxs input')
    var j = 0
    function inp() {
      box1 = event.target.checked
      b.forEach(item => {
        if (box1 == true) {
          j += item.num * item.pic
          $('.s span').html(`${j}`)
        } else {
          $('.s span').html(`0`)
        }
      })
    }

    //
    function suan() {
      var a = document.querySelector('.s span')
      $('.box1').css('display', 'block')
      $('.box1').html('')
      b.forEach(item => {
        $('.box1').append(`
    <img src="${item.img}" alt="">
    <span class="a22">${item.name}</span>
    <span>￥:${item.pic}</span><br>
    <span class='sp'>总价:${j}</span>
      `)
      })
    }
  </script>
</body>

</html>